import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Form, Input, Button, Typography, Row, Col, message, Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { loginApi } from '@/api/user';
import loginImage from '../../imgs/bc.png'; // 请确保这个图片存在，或替换为您实际的图片
import './index.scss';
import { useDispatch } from 'react-redux';
import { setToken ,setUser} from '../../store/models';
const { Title, Text } = Typography;

const Login = () => {
  const navigate = useNavigate()
  const [form] = Form.useForm();
  const [loading, setLoading] = React.useState(false);
  const dispatch = useDispatch()
  const onFinish = async (values) => {
      setLoading(true);
    
      // 这里替换为实际的登录API调用
      const res = await loginApi(values)
      const user = {
        username:res.data.username,
        id:res.data.id
      }
      if(res.data.status === 0){
        message.success('登录成功！');
        dispatch(setToken(res.data.token))
        dispatch(setUser(user))
        navigate('/')
      }else{
        message.error(res.data.message);
      }
      setLoading(false);
  };

  return (
    <div className="login-container">
      <Card className="login-card">
        <Row gutter={24} align="middle">
          {/* 左侧图片区域 */}
          <Col xs={0} sm={0} md={12} className="login-image-container">
            <img 
              src={loginImage} 
              alt="登录页面" 
              className="login-image"
            />
          </Col>
          
          {/* 右侧表单区域 */}
          <Col xs={24} sm={24} md={12} className="login-form-container">
            <Title 
              level={3} 
              className="login-title"
            >
              欢迎登录
            </Title>
            
            <Form
              form={form}
              name="login"
              onFinish={onFinish}
              scrollToFirstError
              layout="vertical"
              size="large" // 确保表单大小为 large
            >
              <Form.Item
                name="username"
                label={<span style={{ fontSize: '16px' }}>用户名</span>} // 增加标签字体大小
                rules={[
                  { required: true, message: '请输入用户名' },
                  { min: 4, message: '用户名至少4个字符' },
                  { max: 16, message: '用户名不能超过16个字符' }
                ]}
              >
                <Input
                  prefix={<UserOutlined style={{ fontSize: '16px' }} />} // 增加图标大小
                  placeholder="请输入用户名"
                  style={{ height: '50px' }} // 增加输入框高度
                />
              </Form.Item>

              <Form.Item
                name="password"
                label={<span style={{ fontSize: '16px' }}>密码</span>} // 增加标签字体大小
                rules={[
                  { required: true, message: '请输入密码' },
                  { min: 6, message: '密码至少6个字符' }
                ]}
              >
                <Input.Password
                  prefix={<LockOutlined style={{ fontSize: '16px' }} />} // 增加图标大小
                  placeholder="请输入密码"
                  style={{ height: '50px' }} // 增加输入框高度
                />
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  block
                  loading={loading}
                  className="login-button"
                >
                  登录
                </Button>
              </Form.Item>
            </Form>

            <div className="login-footer">
              <Text>
                还没有账号？{' '}
                <Link to="/register" className="login-link">
                  立即注册
                </Link>
              </Text>
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default Login;